"use client";

import type * as React from "react";

import {
  useToggleToolbarButton,
  useToggleToolbarButtonState,
} from "@platejs/toggle/react";
import { ListCollapseIcon } from "lucide-react";

import { ToolbarButton } from "./toolbar";

export function ToggleToolbarButton(
  props: React.ComponentProps&lt;typeof ToolbarButton&gt;,
) {
  const state = useToggleToolbarButtonState();
  const { props: buttonProps } = useToggleToolbarButton(state);

  return (
    &lt;ToolbarButton {...props} {...buttonProps} tooltip="Toggle"&gt;
      &lt;ListCollapseIcon /&gt;
    &lt;/ToolbarButton&gt;
  );
}
